<script lang="ts" setup >
import { showmaskListFn,maskListtFn,talkListFn } from '@/api/orderAssign';
import { ref } from 'vue';
export interface imask {
    state:string
    time:string
    name:string
    content:string
}
export interface iTalk {
    name:string
    work:string
    content:string
}
const arr=['项目名称一','项目名称二','项目名称三','项目名称四','项目名称五',]
const datevalue = ref(new Date())
const talkData=ref<iTalk[]>([])
const showmaskData = ref<imask[]>([]);
showmaskListFn().then(res=>{
    showmaskData.value=res.data;
    console.log(showmaskData.value);
    
})
talkListFn ().then(res=>{
    talkData.value=res.data
})
function moreClick(){
maskListtFn().then(res=>{
    showmaskData.value=res.data;
})
}
</script>
<template>
 
    <div class="personmessage">
    <div class="border"></div>
    <div class="totalpersonbox">
        <div class="personbox">
    <div class="personname">张三</div>
    <div class="work">高级售后工程师</div>
    </div>
    <div class="personbox">
    <div class="personname">项目数</div>
    <div class="work">20</div>
    </div>
    <div class="personbox">
    <div class="personname">任务总数</div>
    <div class="work">122</div>
    </div>
    <div class="personbox">
    <div class="personname">已完成</div>
    <div class="work">23</div>
    </div>
    <div class="personbox">
    <div class="personname">待完成</div>
    <div class="work">18</div>
    </div>
    <div class="personbox">
    <div class="personname">已延期</div>
    <div class="work">12</div>
    </div>
    </div>
    <div class="success"><div class="successtitle">完成率</div> 
    <el-progress :percentage="70" />
    </div>
    <div class="delay"><div class="delaytitle">延期率</div> 
    <el-progress :percentage="30" />
    </div>
    </div>
    <div class="contentbox">
    <div class="boxdask"><div class="addbox"><div class="add">我创建的任务</div><div><div  class="addput"></div><span>添加</span></div></div>
    <div class="items" v-for="item in showmaskData" :key="item.content">
    <div class="state">{{ item.state }}</div>
    <div class="time">{{ item.time }}</div>

    </div>
    <el-button class="more"  @click="moreClick">查看更多</el-button>
    </div>
   
    <div class="boxdask">
     
    <div class="addbox"><div class="add">我参与的任务</div></div>
    <div class="items" v-for="item in showmaskData" :key="item.content">
    <div class="state">{{ item.state }}</div>
    <div class="time">{{ item.time }}</div>

    </div>
    <el-button class="more"  @click="moreClick">查看更多</el-button></div>
     <div class="boxdask"> 
        <div class="addbox"><div class="add">话题讨论</div><div>话题列表</div></div>
     <div class="talking" v-for="item in talkData"><div><div>{{ item.name }}</div><div>{{ item.work }}</div></div> <div class="type"><div>{{ item.content }}</div><div>你可以邀请任意数量的成员，加入你的团队</div></div><div>1个小时前</div></div>
     </div>
    <div class="boxdask">
        <div class="addbox"><div class="add">我参与的项目</div> </div>
        <div class="prograss" v-for="item in arr">
        <div>{{ item }}</div>
        <el-progress :percentage="90" />
        </div>
        <el-button class="more" >查看更多</el-button>
    </div>
    <div class="dynamics">
    <div class="dynamicstitle">近期动态</div>
    <div class="dcontent">
    <div class="phone"></div>
    <div class="dbox"><div class="action">李四 将 工单 0190320153227 更新至已处理状态</div>
    <div class="times">几秒前</div></div>
    </div>
    <div class="dcontent">
    <div class="phone"></div>
    <div class="dbox"><div class="action">李四  指派了新的工作任务  工单 0190416153238</div>
    <div class="times">14 分钟前</div></div>
    </div>
    <div class="dcontent">
    <div class="phone"></div>
    <div class="dbox"><div class="action">李四  上传了3张图片</div>
    <div class="times">2 小时前</div>
    <div class="imagebox">
    <div class="image"><div class="imgphone"></div></div> <div class="image"><div class="imgphone"></div></div> <div class="image"><div class="imgphone"></div></div>
</div>
    </div>
  
    </div>
    <div class="dcontent">
    <div class="phone"></div>
    <div class="dbox"><div class="action">李四 将 工单 0190320153227 更新至已处理状态</div>
    <div class="times">几秒前</div></div>
    </div>
    <el-button class="more" >查看更多</el-button>
    </div>
    
    <div class="aboutbox">
    <div class="document">
    <div class="documenttitle">我的文件</div>
    <div class="imagebox">
    <div class="image"><div class="imgphone"></div></div> <div class="image"><div class="imgphone"></div></div> <div class="image"><div class="imgphone"></div></div> <div class="image"><div class="imgphone"></div></div> <div class="image"><div class="imgphone"></div></div> <div class="image"><div class="imgphone"></div></div> <div class="image"><div class="imgphone"></div></div> <div class="image"><div class="imgphone"></div></div> <div class="image"><div class="imgphone"></div></div> <div class="image"><div class="imgphone"></div></div>
</div>
<el-button class="more" >查看更多</el-button>
    </div>
    <div class="date">
        <div class="datetitle">我的日历</div>
        <el-calendar class="dates" v-model="datevalue" />
    </div>
    </div>
    </div>
</template>
<style lang="scss" scoped>
.personmessage{
    width: 94%;
    height: 100px;
    background-color: white;
    margin: 10px auto;
    position: relative;
    .border{
        width: 34px;
        height: 50px;
        border: 5px solid #cccccc;
        position: absolute;
        left: 40px;
        top: 26px;
    }
    .totalpersonbox{
        width: 880px;
        position: absolute;
        left: 120px;
        top: 16px;
        display: flex;
        justify-content: space-between;

    }
    .personbox{
        border-right: 1px solid #cccccc;
        
        padding: 10px;
        .personname{
            padding-bottom: 10px;
            text-align: center;
        }
    }
    .success{
        border-right: 1px solid #cccccc;
        width: 180px;
        padding: 10px;
        position: absolute;
        left: 1020px;
        top: 20px;
        .successtitle{
            padding-bottom: 10px;
        }
    }
    .delay{

        width: 180px;
        padding: 10px;
        position: absolute;
        left: 1250px;
        top: 20px;
        .delaytitle{
            padding-bottom: 10px;
        }
    }
}
.contentbox{
    width: 90%;
    height:1160px;
 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    margin: 30px auto;
   
    .boxdask{
        width: 49%;
        height: 290px;
        overflow: hidden;
        background-color: white;
        position: relative;
        .prograss{
            margin: 5px;
        }
        .talking{
        width: 100%;
        height:50px ;
        display: flex;
        font-size: 12px;
            justify-content: space-between;align-items: center;
            padding: 10px;
            .type{
                width: 70%;
                font-size: 12px;
                text-align: center;
            }
    }
        .addbox{
            width: 100%;
            height: 50px;

            display: flex;
            border-bottom: 1px solid;
            justify-content: space-between;align-items: center;
            padding: 10px;
          .addput{
            width: 10px;
            height: 16px;
            border: 1px solid;
            position: absolute;
            right: 46px;
            top: 18px;
          }
        }
        .items{
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: space-between;
            padding: 10px;
            .state{
                font-size: 14px;
            }
            .time{
                font-size: 14px;
            }
           
        }
        
    }

    .dynamics{
        width: 49%;
        height: 680px;
        background-color: white;
        margin: 40px 0;
        .dynamicstitle{
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #e9e9e9;
            padding: 14px;
        }
        .dcontent{
            width: 100%;
            border-bottom: 1px solid #e9e9e9;
            display: flex;
 
            .phone{
                width: 24px;
                height: 36px;
                border: 4px solid #cccccc;
                float: left;
                margin: 20px 40px 
            }
            .dbox{
                width: 280px;
                float: left;
             
                font-size: 14px;
                margin: 20px 10px ;
                
            }
        }
        .more{
            margin-top: 40px;
        }
    }
    .aboutbox{
        width: 49%;
        height: 680px;
        margin: 40px 0;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
        .document{
            width: 100%;
            height: 360px;
            background-color: white;
            .documenttitle{
                width: 100%;
            height: 50px;
            border-bottom: 1px solid #e9e9e9;
            padding: 14px;
            }
            .imagebox{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
     align-content: space-around;
     margin-left: 60px;
     width: 600px;
     height: 230px;
     .image{
        width:110px;
        height:110px;
        background-color: #cccccc;
        .imgphone{
            width: 20px;
            height: 30px;
            border: 5px solid white;
            margin: 38px auto;
        }
    }
    }
    .more{
        margin-top: 30px;
    }
        }
        .date{
            width: 100%;
            height: 300px;
            background-color: white;
            overflow: hidden;
            .datetitle{
                width: 100%;
            height: 50px;
            border-bottom: 1px solid #e9e9e9;
            padding: 14px;
            }
            .dates{
                width: 100%;
      
            }
        }
    }
}

.more{
     margin: 0 45%;
    }

    .imagebox{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
     align-content: space-around;
     width: 300px;
     .image{
        width: 90px;
        height: 90px;
        background-color: #cccccc;
        .imgphone{
            width: 20px;
            height: 30px;
            border: 5px solid white;
            margin: 28px auto;
        }
    }
    }

</style>